<template>
    <section id="k8s-deployments">
        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>详情</div>
            <hr>
            <div style="margin-bottom: 5px">名称：{{DeploymentDetail.deployDetail.name}}</div>
            <div style="margin-bottom: 5px">命名空间：{{DeploymentDetail.deployDetail.namespace}}</div>

            <div style="margin-bottom: 5px">标签：<el-tag size="mini" v-for="(v,key) in DeploymentDetail.deployDetail.labels "> {{key}}: {{v}}</el-tag></div>
            <div style="margin-bottom: 5px">选择器：<el-tag size="mini" v-for="(v,key) in DeploymentDetail.deployDetail.selector "> {{key}}: {{v}}</el-tag></div>

            <div style="margin-bottom: 5px">副本数：{{DeploymentDetail.deployDetail.replicas}}</div>
            <div style="margin-bottom: 5px">策略：{{DeploymentDetail.deployDetail.strategy}}</div>
            <div style="margin-bottom: 5px">最小就绪秒数：{{DeploymentDetail.deployDetail.minreadyseconds}}</div>
            <div style="margin-bottom: 5px">滚动更新策略：{{DeploymentDetail.deployDetail.rollupdatestrategy}}</div>
            <div style="margin-bottom: 5px">状态：{{DeploymentDetail.deployDetail.status}}</div>
            <div style="margin-bottom: 5px">创建时间：{{DeploymentDetail.deployDetail.createdate}}</div>

        </el-card>
        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>新副本集</div>
            <hr>
            <el-table
                    :data="DeploymentDetail.newReplicaSets"
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <template slot="empty">
                    <h5>无内容显示</h5>
                </template>

                <el-table-column

                        width="40">
                    <template slot-scope="scope">
                        <i :class="scope.row.status !== true ? 'fa fa-info-circle' : 'fa fa-check-circle'"
                           :style="scope.row.status !== true ? 'font-size:18px;color:red' : 'font-size:18px;color:green'"
                        >

                        </i>

                    </template>



                </el-table-column>


                <el-table-column
                        prop="name"
                        label="名称"
                        width="250">

                    <template slot-scope="scope">
                        <el-link :href="'#/kubernetes/replicaset/' + scope.row.name + '?namespace=' + $route.query.namespace"  type="primary" :underline="false" >{{scope.row.name}}</el-link>
                    </template>

                </el-table-column>

                <el-table-column
                        prop=""
                        label="标签"
                        width="300"
                >
                    <template slot-scope="scope">
                        <div v-for="(v,k) in scope.row.labels">
                            <el-tag  type="info" size="mini">{{k}}:{{v}}</el-tag>
                        </div>
                    </template>


                </el-table-column>
                <el-table-column
                        prop="containers"
                        label="容器组"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="createdate"
                        label="创建日期"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        prop=""
                        label="镜像"
                        fit
                >
                    <template slot-scope="scope">
                        <div v-for="image in scope.row.images">
                            <el-tag  type="info" size="mini">{{image}}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="warning"
                                plain
                                icon="el-icon-edit"
                                @click="editResourceYaml(scope.row.name,$route.query.namespace,'replicasets')"
                        ></el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                @click="deleteKubernetesResource(scope.row.name,$route.query.namespace,'replicasets')"
                        ></el-button>
                    </template>
                </el-table-column>

            </el-table>
        </el-card>
        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>旧副本集</div>
            <hr>
            <el-table
                    :data="DeploymentDetail.oldReplicaSets"
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <el-table-column
                        prop="name"
                        label="名称"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop=""
                        label="标签"
                        width="300"
                >
                    <template slot-scope="scope">
                        <div v-for="(v,k) in scope.row.labels">
                            <el-tag  type="info" size="mini">{{k}}:{{v}}</el-tag>
                        </div>
                    </template>


                </el-table-column>
                <el-table-column
                        prop="containers"
                        label="容器组"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="createdate"
                        label="创建日期"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        prop=""
                        label="镜像"
                        fit
                >
                    <template slot-scope="scope">
                        <div v-for="image in scope.row.images">
                            <el-tag  type="info" size="mini">{{image}}</el-tag>
                        </div>
                    </template>
                </el-table-column>

            </el-table>

        </el-card>

        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>容器组水平伸缩器</div>
            <hr>
            <el-table
                    :data="DeploymentDetail.hpas"
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <el-table-column
                        prop="name"
                        label="名称"
                        width="250">
                </el-table-column>

                <el-table-column
                        prop="targetcpupercent"
                        label="目标CPU使用率"
                >
                </el-table-column>
                <el-table-column
                        prop="currentcpupercent"
                        label="当前CPU使用率"

                >
                </el-table-column>
                <el-table-column
                        prop="minreplicas"
                        label="最小副本数"

                >
                </el-table-column>
                <el-table-column
                        prop="maxreplicas"
                        label="最大副本数"

                >
                </el-table-column>
                <el-table-column
                        prop="createdate"
                        label="创建日期"

                >
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="warning"
                                plain
                                icon="el-icon-edit"
                                @click="editResourceYaml(scope.row.name,$route.query.namespace,'horizontalpodautoscalers')"
                        ></el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                @click="deleteKubernetesResource(scope.row.name,$route.query.namespace,'horizontalpodautoscalers')"
                        ></el-button>
                    </template>
                </el-table-column>


            </el-table>
        </el-card>
        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>事件</div>
            <hr>
            <el-table
                    :data="DeploymentDetail.events"
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <template slot="empty">
                    <p>暂无事件内容</p>
                </template>

                <el-table-column
                        prop="message"
                        label="消息"
                        width="600">
                </el-table-column>
                <el-table-column
                        prop="source"
                        label="来源">
                </el-table-column>
                <el-table-column
                        prop="childobject"
                        label="子对象"
                >
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="总数"
                >
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="原因"
                >
                </el-table-column>
                <el-table-column
                        prop="lastoccurtime"
                        label="最近出现于"
                >
                </el-table-column>


            </el-table>
        </el-card>
        <el-dialog :title=yamlTitle :visible.sync="editK8sResourceYamlVisible" :close-on-click-modal="false">
            <vue-json-editor v-model="yamlMeta" :show-btns="false"  mode="tree" ></vue-json-editor>

            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="editK8sResourceYamlVisible=false">取 消</el-button>
                <el-button size="small" @click="updateResourcceFromYaml" >更 新</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import vueJsonEditor from 'vue-json-editor'
    import { k8sDeploymentDetailData,K8sResourceYaml,UpdateResourceUseYaml,deleteK8sResource } from '../../api/api'
    export default {
        data() {
            return {
                DeploymentDetail: {
                    deployDetail: {},
                    newReplicaSets:{},
                    events:{},
                },

                yamlTitle:"",
                editResourceName:"",
                editResourceType:"",
                yamlMeta:{},
                editK8sResourceYamlVisible: false,
            }
        },
        methods: {

            getK8sDeploymentDetailData(){
                let self = this
                let param = {name:this.$route.params.name,namespace:this.$route.query.namespace}
                k8sDeploymentDetailData(param).then((res) => {
                    console.log(res)
                    self.DeploymentDetail.deployDetail = res.deployDetail
                    self.DeploymentDetail.newReplicaSets = res.newReplicaSets
                    self.DeploymentDetail.oldReplicaSets = res.oldReplicaSets
                    self.DeploymentDetail.hpas = res.hpas
                    self.DeploymentDetail.events = res.events


                })

            },
            editResourceYaml(name,namespace,type){
                let self = this
                let param = {name:name,namespace:namespace,type:type}
                K8sResourceYaml(param).then((res) => {
                    // console.log(res.metadata)
                    console.log(JSON.parse(res.metadata))
                    self.yamlMeta = JSON.parse(res.metadata)
                })
                // console.log(self.yamlMeta)
                self.yamlTitle = "修改" + type + ": " + name
                self.editResourceName = name
                self.editResourceType = type
                self.editK8sResourceYamlVisible = true


            },
            updateResourcceFromYaml(){
                let self = this
                // console.log(self.yamlMeta)

                let param = {name:self.editResourceName,namespace:self.$route.query.namespace,type:self.editResourceType,podYaml:self.yamlMeta}
                // console.log(param)
                UpdateResourceUseYaml(param).then((res) => {
                    if (res.code === 400) {
                        // alert(res.message)
                        self.$alert(res.message, '更新错误', {
                            confirmButtonText: '确定',
                        });
                    }
                })
                self.editK8sResourceYamlVisible = false

            },
            deleteKubernetesResource(name,namespace,type){

                let self = this
                let param = {name:name,namespace:namespace,type:type}
                // deleteK8sPod(param).then((res) => {
                // })
                // self.getK8sReplicaSetDetailData()

                this.$confirm('确定删除?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    deleteK8sResource(param).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                        }else if (res.code === 400) {
                            self.$alert(res.message, '删除失败', {
                                confirmButtonText: '确定',
                            });
                        }
                    })


                }).catch(() => {

                });

                // self.getK8sReplicaSetDetailData()
                // this.reload()

            },
            rowStyle({ row, rowIndex}){
                return "height:40px;background-color: #FAFAFA;"
            },
            headerStyle({ row, rowIndex}){
                return "height:20px;color:#0099FF;background-color: #FAFAFA;"
            },

        },
        mounted: function () {
            console.log(this.$route.params.name)
            console.log(this.$route.query.namespace)
            this.getK8sDeploymentDetailData()
        },
        components: {
            vueJsonEditor
        },
    }
</script>
<style>
    #k8s-deployments .bg-card {
        background-color: #FAFAFA;
    }
    #k8s-deployments .el-table__empty-block {
        background-color: #FAFAFA;
        height: 40px;
        font-weight: bold;
    }
</style>